<template>
  <el-dialog
    v-drag-dialog
    class="sxTableImageEdit"
    title="图片上传"
    :visible="visible"
    append-to-body
    @close="handleDialogClose"
  >
    <SxUploadImage
      ref="imageUploader"
      :limit="limit"
      :file-list="innerFileList"
    />

    <template v-slot:footer>
      <div class="sxTableImageEdit__footer">
        <el-button :size="$store.getters.size" type="primary" @click="handleSave">
          确定
        </el-button>
        <el-button :size="$store.getters.size" @click="handleDialogClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import SxUploadImage from '@Components/UploadImage'
export default {
  name: 'SxTableImageEdit',
  components: {
    SxUploadImage
  },
  props: {
    tableRow: {
      type: Object,
      default() {
        return {}
      }
    },
    limit: {
      type: Number,
      default: 5
    },
    visible: {
      type: Boolean,
      default: false
    },
    fileList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      innerFileList: []
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          // 移除空的图片
          this.innerFileList = this.fileList.filter(i => i.filePath)
        }
      },
      immediate: true
    }
  },
  methods: {
    handleSave() {
      const data = this.$refs.imageUploader.getImageList()
      this.$emit('save', data, this.tableRow)
      this.handleDialogClose()
    },
    handleDialogClose() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style scoped lang="scss">
.sxTableImageEdit {
  /deep/ .el-dialog {
    &__body {
      padding-top: 10px;
    }
  }
  &__footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    button {
      &:last-child {
        margin-left: 10px;
      }
    }
  }
}
</style>
